<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { GetMdItem } from '#/api';

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { align: 'left', title: '', type: 'checkbox', width: 50 },
    {
      field: 'itemCode',
      title: '物料编码',
    },
    { field: 'itemName', title: '物料名称' },
    { field: 'specification', title: '规格' },
    { field: 'price', title: '单位' },
    { field: 'releaseDate', formatter: 'formatDateTime', title: '使用比例' },
    { field: 'id', title: '备注' },
  ],
  exportConfig: {},
  // height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const res = await GetMdItem({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        return {
          total: res.total,
          items: res.rows,
        };
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
});
</script>

<template>
  <div class="vp-raw w-full">
    <el-tabs type="border-card">
      <el-tab-pane label="BOM组成" />
      <el-tab-pane label="替代品" />
      <el-tab-pane label="SIP" />
      <el-tab-pane label="SOP" />
      <Grid />
    </el-tabs>
  </div>
</template>
